<template>
  <PageListContainer>
    <div class="base-block">
      <div class="content">
        <h2 class="title">达人UID生成器</h2>
        <el-form>
          <el-form-item label="抖音账号" prop="account">
            <el-input v-model="account" placeholder="请输入抖音账号" clearable style="width: 300px" />
          </el-form-item>
        </el-form>
        <div class="uid-item">
          <p class="uid-label">达人UID：</p>
          <p class="uid-value">{{ uid }}</p>
          <el-icon v-if="uid" class="copy" @click="onClickCopy(uid)"><CopyDocument /></el-icon>
        </div>
        <el-button type="primary" class="create-btn" @click="createUid">生成UID</el-button>
      </div>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { toolCopyText } from '@/utils';
import { ElMessage } from 'element-plus';
import { getAuthorUid } from '@/api/crm-kgj/tools';
import { AuthCode, hasPermission } from '@/modules/auth';
defineOptions({
  name: 'KgjToolsDarenUid'
});

// 抖音账号
const account = ref('');

// 抖音uid
const uid = ref('');

// 复制
const onClickCopy = (content: string) => {
  toolCopyText(content);
  ElMessage.success('复制成功');
};

// 获取uid
const createUid = () => {
  if (!hasPermission(AuthCode.KGJ_TOOL_DAREN_CREATE)) {
    return;
  }
  if (!account.value) {
    ElMessage.error('请输入抖音账号');
    return;
  }
  ElMessage.info('生成中');
  getAuthorUid({ douyinid: account.value })
    .then((res: any) => {
      uid.value = res.data.uid;
      ElMessage.success('生成成功');
    })
    .catch(() => {
      ElMessage.error('生成失败');
    });
};
</script>
<style lang="scss" scoped>
.page-list-container {
  height: 600px;
  .base-block {
    height: 100%;
    .content {
      padding: 30px 0;
      width: 400px;
      margin: 0 auto;
      .title {
        text-align: center;
        padding-bottom: 30px;
      }
      .uid-item {
        display: flex;
        .uid-label {
          font-size: 14px;
          color: #606266;
        }
        .uid-value {
          font-size: 14px;
          color: #333;
        }
        .copy {
          margin-left: 10px;
          font-size: 14px;
          &:hover {
            cursor: pointer;
            color: #4975e9;
          }
        }
      }
      .create-btn {
        margin: 30px 150px 0;
        width: 100px;
      }
    }
  }
}
</style>
